<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '文化菜单',
    navigationStyle: 'custom',
  },
}
</route>

<script setup>
import TopBar from '@/components/TopBar.vue'
import { goBack } from '@/utils'
import ShareMenu from './components/ShareMenu.vue'
import CustomMenu from './components/CustomMenu.vue'
import ProgrammeMenu from './components/ProgrammeMenu.vue'

// 获取状态栏高度
const { statusBarHeight } = uni.getSystemInfoSync()

const tabList = [
  { label: '文化共享菜单', value: 'share' },
  { label: '文化定制菜单', value: 'custom' },
]
const activeTab = ref('')

const handleCheckTab = (val) => {
  activeTab.value = val
}
handleCheckTab(tabList[0].value)
</script>

<template>
  <view class="common-page-bg">
    <view
      class="page-header"
      :style="{
        paddingTop: `${statusBarHeight}px`,
      }"
    >
      <view class="page-header-nav">
        <view @tap="goBack()">
          <wd-icon
            name="chevron-left"
            size="56rpx"
            color="#fff"
          ></wd-icon>
        </view>
        <view class="page-header-nav-title">文化菜单</view>
      </view>
      <TopBar
        :tab-list="tabList"
        :active-tab="activeTab"
        @check="handleCheckTab"
      />
    </view>
    <ShareMenu v-if="activeTab === 'share'" />
    <!-- <CustomMenu v-if="activeTab === 'custom'" /> -->
    <ProgrammeMenu v-if="activeTab === 'custom'" />
  </view>
</template>

<style lang="scss" scoped>
.common-page-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.page-header {
  position: relative;
  z-index: 1;
  width: 100%;
  background-image: linear-gradient(90deg, #64e1ff 0%, #2f8de4 100%);
  box-sizing: border-box;

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  &-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    // width: 100%;
    height: 88rpx;
    padding: 0 24rpx;

    &-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}
</style>
